<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Home</title>
<link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../css/iotxstyle.css" rel="stylesheet" type="text/css" media="all" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="../../js/jquery-2.0.3.min.js"></script>
<script src="../../js/responsiveslides.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="../../js/move-top.js"></script>
<script type="text/javascript" src="../../js/easing.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jquery.progress.js"></script>
<style>
	.nav > li {
		position: relative;
		display: block;
		margin-left: 30px;
		border: 0px;
	}
	.form-control{
		margin-top:10%;width: 120%;height: 80%;font-size: 18px
	}
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
		color: #262626;
		text-decoration: none;
		background-color: #f5f5f5;
	}
	div.bg_con{
		float: right;
		margin-right: 38%;
		width: 3.7%;
		height: 50%;
	}
	div.bg_con input.theHelper{
		display:none;
	}
	div.bg_con label{
		position:relative;
		display: block;
		padding: 1px;
		border-radius: 24px;
		height: 22px;
		background-color: #eee;
		cursor: pointer;
		vertical-align: top;
		-webkit-user-select: none;
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:before{
		content: '';
		display: block;
		border-radius: 24px;
		height: 22px;
		background-color: orange;
		-webkit-transform: scale(1, 1);
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		margin-left: -11px;
		display: block;
		border-radius: 100%;
		background-color: white;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
		-webkit-transform: translateX(-9px);
		-webkit-transition: all 0.3s ease;
	}
	input.theHelper:checked~label:after{
		-webkit-transform: translateX(9px);
	}
	input.theHelper:checked~label:before{
		background-color:#4cda64;
	}
</style>
</head>
<body>
<!--navbar -->
	<div class="all-navbar">
	   <nav class="navbar navbar-default">
			   <div class="navbar-header">
				   <div class="navbar-brand">
					   <h1><a href="index.html">iotx</a></h1>
				   </div>
			   </div>
				   <ul class="nav navbar-nav">
					   <li >
						   <a href="#" id="system" style="border: 0px">System <span class="sr-only"></span></a>
					   </li>
					   <li ><a href="#" id="network">Network</a></li>
					   <li><a href="#" id="sensors">Sensors</a></li>
					   <li class="dropdown">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Files<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datafile">Data  File</a></li>
							   <li><a href="#" id="settingfile">Setting  File</a></li>
						   </ul>
					   </li>
					   <li class="dropdown" class="active">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datarecovery">Data  Recovery</a></li>
							   <li><a href="#" id="settingguide">Setup Wizard</a></li>
						   </ul>
					   </li>
					   <li><a href="#" id="logout">Logout</a></li>
					   <li>
						   <button class="apply-button" style="margin-left: 40%">
							   Apply&Save
						   </button>
					   </li>
					   <li>
						   <button class="apply-button">
							   Upload
						   </button>
					   </li>
				   </ul>
	   </nav>
	</div>
<!--navbar -->
	<section>
		<div class="systemInfo">
			<div class="system-title" >
				Tools
				<div class="second-title">
					> Data Recovery
				</div>
			</div>
			<input type="file" id="file" onchange="getFilePath()"
				   style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
			<button onclick="selectFile();">select file</button>
			<button onclick="getFilePath()">get FilePath</button>
		</div>

	</section>

<script>
    $(document).ready(function(){
        $('#system').click(function(){
            window.location.href='../../index.html';
        });
        $('#network').click(function(){
            window.location.href='../network/network.html';
        });
        $('#sensors').click(function(){
            window.location.href='../sensors/sensors.html';
        });
        $('#datafile').click(function(){
            window.location.href='../data/datafile.html';
        });
        $('#settingfile').click(function(){
            window.location.href='../data/settingfile.html';
        });
        $('#settingguide').click(function(){
            window.location.href='../guide/guide.html';
        });
        $('#logout').click(function(){
            window.location.href='../../login.html';
        });
    });
</script>
<script type='text/javascript'>
    function selectFile(){
        //触发 文件选择的click事件
        $("#file").trigger("click");

        //其他code如 alert($("#file").attr("value"))
    }

	/* 获取 文件的路径 ，用于测试*/
    function getFilePath(){
        alert($("#file").attr("value"));
    }
</script>



</body>
</html>